export default {
    template:`
    <div class="my-switch">
        <label class="switch-btn" :class="{ active:getActive }">
            <input type="checkbox" 
                :true-value="trueValue" 
                :false-value="falseValue" 
                :value="value" 
                v-model="state"
            >
            <span class="pot"></span>
        </label>
    </div>
    `,
    emits:["update:modelValue"],
    props:{
        modelValue:{
            default(){
                return []
            }
        },
        value:{
            type:String,
            default:""
        },
        trueValue:{
            default:""
        },
        falseValue:{
            default:""
        }
    },
    computed: {
        state:{
            get(){
                return this.modelValue;
            },
            set(nv){
                console.log(nv)
                this.$emit("update:modelValue",nv)
            }
        },
        getActive(){
            console.log(this.modelValue instanceof String)
            if(Array.isArray(this.modelValue)){
                return this.modelValue.includes(this.value)
            }else if(this.modelValue instanceof Set){
                return this.modelValue.has(this.value)
            }else if(typeof(this.modelValue)=="string"){
                return this.trueValue == this.modelValue;
            }else{
                return this.modelValue;
            }
        }
    },
}